<template>
  <h1>组件</h1>
  <p >{{ total }}</p>
  <Mio :total="0" @chenge="onChenge"></Mio>
  <button @click="total=100">设置100票</button>
  <list :data="fruits" :page="page" :pageSize="pageSize"></list>
  <page :page="page" :pageSize="pageSize" :total="fruits.length" @change="pageChange"></page>

  <but></but>
  
</template>

<script>
import but from './but.vue'
export default {

  components: {
    but
  },
  data() {
    return {
      total: 0,

      page: 1,
      pageSize: 2,
      fruits: [
        { id: 1, name: '苹果', price: 10 },
        { id: 2, name: '香蕉', price: 15 },
        { id: 3, name: '橘子', price: 20 },
        { id: 4, name: '草莓', price: 18 },
        { id: 5, name: '葡萄', price: 25 },
      ],
    }
  },
  methods: {
    pageChange(page) {
      this.page = page;
    },
    onChenge(item){
      this.total = item;
    }
  },
}
</script>